<template>
  <div>
    <a-modal
      @cancel="onCancel"
      :mask="true"
      :maskClosable="false"
      :visible="addModel.open"
      :title="addModel.title"
      @ok="handleOk('form')"
      width="800px"
      :confirm-loading="confirmLoading"
    >
      <a-form-model
        :model="formData"
        :label-col="labelCol"
        ref="form"
        :wrapper-col="wrapperCol"
        :rules="rules"
      >
        <a-row>
          <a-col :span="12">
            <a-form-model-item prop="userName" label="用户名称">
              <a-input
                v-model="formData.userName"
                placeholder="请输入用户名称"
                :disabled="addModel.disabled"
                required
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item prop="userPhone" label="手机号">
              <a-input
                v-model="formData.userPhone"
                placeholder="请输入手机号"
                :disabled="addModel.disabled"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item prop="sex" label="性别">
              <a-select
                :disabled="addModel.disabled"
                v-model="formData.sex"
                placeholder="请选择性别"
              >
                <a-select-option :value="1">男</a-select-option>
                <a-select-option :value="2">女</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item prop="email" label="邮箱">
              <a-input
                :disabled="addModel.disabled"
                v-model="formData.email"
                placeholder="请输入邮箱"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row v-show="formData.userStatus">
          <a-col :span="12">
            <a-form-model-item label="用户状态">
              <a-select
                :disabled="addModel.disabled"
                v-model="formData.userStatus"
                placeholder="请选择状态"
              >
                <a-select-option :value="1">启用</a-select-option>
                <a-select-option :value="2">禁用</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
  </div>
</template>
  <script>
import { getSystemUser, addSystemUser } from "@/services/user";

export default {
  props: {
    addModel: {
      type: Object,
      // default: {},
    },
  },
  data() {
    let validatePhoneNumber = (rule, value, callback) => {
      if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };
    let validateEmail = (rule, value, callback) => {
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
      if (!regEmail.test(value)) {
        callback(new Error("请输入合法的邮箱"));
      } else {
        callback();
      }
    };
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      value: 1,
      loading: false,
      confirmLoading: false,

      formData: {
        userName: "",
        userPhone: "",
        sex: null,
        userStatus: null,
        email: "",
      },
      rules: {
        userName: [
          { required: true, message: "请输入用户名称", trigger: "change" },
        ],
        userPhone: [
          { required: true, message: "请输入手机号码", trigger: "change" },
          {
            validator: validatePhoneNumber,
            trigger: "change",
          },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        email: [
          { required: true, message: "请输入邮箱", trigger: "change" },
          {
            validator: validateEmail,
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {
    if (this.addModel.userId) {
      this.getInfo();
    }
  },

  methods: {
    getInfo() {
      getSystemUser(this.addModel.userId).then((res) => {
        if (!res) return;
        this.formData.userName = res?.data.userName;
        this.formData.userPhone = res?.data.userPhone;
        this.formData.sex = res?.data.sex;
        this.formData.userStatus = res?.data.userStatus;
        this.formData.email = res?.data.email;
      });
    },
    handleOk(form) {
      if (!this.addModel.disabled) {
        this.$refs[form].validate((valid) => {
          if (valid) {
            this.loading = true;
            addSystemUser(this.formData).then((res) => {
              this.loading = false;
              if (res.retcode == "success") {
                this.onCancel();
                this.$message.success("操作成功");
                this.$emit("refresh");
              }
            });
          } else {
            return false;
          }
        });
      } else {
        this.onCancel();
      }
    },
    onCancel() {
      this.$emit("close");
    },
  },
};
</script>
<style lang="less" scoped>
// .ant-modal {
// ::v-deep.ant-modal-content {
//   width: 800px !important;
// }
// }
</style>
